9
<!--
 * @Author: 王灿
 * @Date: 2019-12-18 19:51:14
 * @LastEditTime : 2019-12-18 19:51:17
 * @Description: 商品参数
 * @FilePath: \scarlet-sparrow-admin\src\views\commodity\commodity-param\index.vue
 -->
 
 <template>
  <div class="commodity-param">
    <el-row class="commodity-param__row">
      <el-button icon="el-icon-plus" @click="onAddRow"></el-button>
    </el-row>
    <el-row class="commodity-param__row">
      <el-input value="参数名称" readonly></el-input>
      <el-input value="参数值" readonly></el-input>
    </el-row>
    <el-row class="commodity-param__row" v-for="(item, index) in parameter" :key="index">
      <el-input v-model="item.key" clearable></el-input>
      <el-input v-model="item.value" clearable></el-input>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmitForm">确 定</el-button>
      <el-button @click="onCancelForm">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { getProductUpdate } from '@/api/commodity'
export default {
  name: 'CommodityMark',
  props: {
    // 商品参数
    row: {
      type: [Object, String],
      default: () => {
        return {}
      }
    },
    // 商品Id
    productId: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      parameter: []
    }
  },
  watch: {
    // 监听数据改变清空已输入值
    row() {
      this.parameter = []
      if (this.row !== '' && JSON.stringify(this.row) !== '{}') {
        Object.keys(this.row).map(key => {
          this.parameter.push({key: key, value: this.row[key]})
        })
      }
    }
  },
  created() {
    if (this.row !== '' && JSON.stringify(this.row) !== '{}') {
      Object.keys(this.row).map(key => {
        this.parameter.push({key: key, value: this.row[key]})
      })
    }
  },
  methods: {
    onAddRow() {
      let _result = this.parameter.filter(item => item.key === '' || item.value === '')
      if (_result.length !== 0) {
        this.$message.error('请先填写空白处')
      } else {
        this.parameter.push({key: '', value: ''})
      }
    },
    // 提交
    onSubmitForm() {
      let _result = this.parameter.filter(item => item.key !== '' && item.value !== '')
      let params = {}
      _result.forEach(item => {
        params[item.key] = item.value
      })
      getProductUpdate({
        id: this.productId,
        parameter: JSON.stringify(params)
      }).then( () => {
        this.$message.success('编辑商品参数成功')
        this.onRefresh()
      })
    },
    // 取消
    onCancelForm() {
      let data = { isShow: false, isRefresh: false }
      this.$emit('onChangeMarkParent', data)
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        let data = { isShow: false, isRefresh: true }
        this.$emit('onChangeMarkParent', data)
      }, 500)
    }
  }
}
</script>

<style lang="scss">
.commodity-param {
  .commodity-param__row {
    @include row;
    margin-top: 0 !important;
    &:nth-child(2) {
      .el-input__inner {
         color: #fe5c5c !important;
      }
    }
    .el-button {
      padding: 8px 20px;
      margin-top: 30px;
      margin-bottom: 10px;
    }
  }
  .dialog-footer {
    margin-top: 30px !important;
  }
}
</style>
